<!-- Horizontal Form -->
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">添加属性</h3>
        <h3 class="msg"></h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">

            <input hidden type="text" name="id" id="specificationId">
            <div class="form-group">
                <label for="shopId" class="col-sm-2 control-label">归属店铺</label>
                <select style="margin-left: 12px;display: inline-block ;height: 30px;width: 200px; "
                        th:with="type=${@shopServiceImpl.selectShopList1()}" id="shopId" name="shopId">
                    <option th:each="shop : ${type}" th:text="${shop.name}" th:value="${shop.id}"></option>
                </select>
            </div>

            <div class="form-group">
                <label for="spuId" class="col-sm-2 control-label">所属spu</label>
                <select style="margin-left: 12px;display: inline-block ;height: 30px;width: 200px; "
                        th:with="type=${@spuServiceImpl.selectSpuList1()}" id="spuId" name="spuId">
                    <option th:each="shop : ${type}" th:text="${shop.name}" th:value="${shop.id}"></option>
                </select>
            </div>

            <div class="form-group" >
                <label for="specificationNameId" class="col-sm-2 control-label">规格名称</label>
                <div class="col-sm-10">
                    <input type="text" name="specification" class="form-control" id="specificationNameId">
                </div>
            </div>

            <div class="form-group">
                <label for="valueId" class="col-sm-2 control-label">规格值</label>
                <div class="col-sm-10">
                    <input type="text" name="value" class="form-control" id="valueId">
                </div>
            </div>
            <div class="form-group">
                <label for="ImagesId" class="col-sm-2 control-label">规格图标</label>
                <div class="col-sm-10">
                    <input hidden type="text" name="picUrl" id="picUrlId">
                    <input type="file" onchange="changeImage()" id="ImagesId" multiple="multiple"
                           accept="image/*"/>更改图片
                    <img id="gimage" style="width: 100px;height: 50px"
                         src="/img.png">
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel">Cancel</button>
            <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
    </form>
    <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="treeLayer" type="page" times="2"
         showtime="0" contype="object"
         style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
        <div class="layui-layer-title" style="cursor: move;">选择部门</div>
        <div class="layui-layer-content" style="height: 358px;">
            <div style="padding: 10px;" class="layui-layer-wrap">
                <ul id="zTreeId" class="ztree"></ul>    <!-- 动态加载树 -->
            </div>
        </div>
        <span class="layui-layer-setwin"> <a
                class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel"></a></span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0 btn-confirm" >确定</a>
            <a class="layui-layer-btn1 btn-cancel" >取消</a>
        </div>
    </div>
</div>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $(".box-footer")
            .on("click",".btn-cancel",doCancel)
            .on("click",".btn-save",doSaveOrUpdate);
        doInitFormData()

    });
    // 封面图上传
    function changeImage() {
        var data = new FormData();
        var len = $('#ImagesId')[0].files.length;
        for (var i = 0; i < len; i++) {
            var file = $('#ImagesId')[0].files[i];
            data.append('file', file);//将图片信息file保存到该对象
        }
        ;

        if (len == 0) {
            alert("未上传图片！");
        } else {
            $.ajax({
                url: '/file/upload',
                type: 'POST',
                data: data,
                processData: false,//建议添加，否则值传可能不到对应url
                contentType: false,//建议添加，否则值可能传不到对应url
                success: function (arg) {
                    $("#gimage").show()
                    $("#gimage").attr("src", arg)
                    $("#picUrlId").val(arg);
                },
                error: function (arg) {
                    console.log(arg);
                    $('#result').html(arg);
                    alert("失败")
                }
            });
        }
    }

    function doInitFormData() {
        var data = $("#mainContentId").data("rowData");
        if (!data) return;
        console.log(data);
        //初始化供应商信息
        $("#specificationId").val(data.id);
        $("#shopId [selected='selected']").attr("selected", false);
        $("#shopId [value='" + data.shopId + "']").attr("selected", "selected")

        $("#spuId [selected='selected']").attr("selected", false);
        $("#spuId [value='" + data.spuId + "']").attr("selected", "selected")

        $("#specificationNameId").val(data.specification);
        $("#valueId").val(data.value);

        $("#gimage").attr("src",data.picUrl==""?"/img.png":data.picUrl)

    }

    function doCancel() {
        $("#mainContentId").removeData("rowData");
        $("#mainContentId").load("/specification");
    }


    function doSaveOrUpdate() {
        var rowData = $("#mainContentId").data("rowData");
        //1.获取表单数据
        var params = $("form").serializeArray();
        if (rowData) {
            params.id = rowData.id;
        }

        //2.发起异步请求
        var insertUrl = "specification/add";
        var updateUrl = "specification/edit";
        var url = rowData ? updateUrl : insertUrl;
        console.log(params);
        $.post(url, params, function (result) {
            if (result.state == 1) {
                if(rowData){
                    alert("修改成功");
                }else{
                    alert("保存成功")
                }
                doCancel();
            } else {
                alert(result.message);
            }
        })
    }


</script>






